<template>
  <div
    class="basic-card"
    :style="{
      border: border ? '1px solid white' : 'none'
    }"
  >
    <div v-if="showHeader" class="basic-card__header">
      <div class="left">
        <basic-title :title="title"></basic-title>
        <div class="after-title">
          <slot name="after-title"></slot>
        </div>
      </div>
      <div class="right">
        <slot name="right">
          <div v-if="more" class="more" @click="emit('more')">
            <el-tooltip placement="top" :content="$t('common.layout.more')">
              <basic-icon name="ellipsis"></basic-icon>
            </el-tooltip>
          </div>
        </slot>
      </div>
    </div>

    <div class="basic-card__body">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
interface IEmit {
  (event: 'more'): void
}

interface IProps {
  showHeader?: boolean
  title?: string
  more?: boolean
  padding?: string
  border?: boolean
}

const emit = defineEmits<IEmit>()
withDefaults(defineProps<IProps>(), {
  showHeader: true,
  title: '',
  more: false,
  padding: '16px',
  border: false
})
</script>

<style scoped lang="scss">
.basic-card {
  @apply flex flex-col w-full bg-white rounded-[8px];

  padding: v-bind('$props.padding');

  &__header {
    @apply flex items-center justify-between mb-[16px] flex-shrink-0;

    .left {
      @apply flex items-center;

      .after-title {
        @apply ml-[8px];
      }
    }

    .right {
      .more {
        @apply w-[20px] h-[20px] flex justify-center items-center rounded-[4px] cursor-pointer transition;

        &:hover {
          @apply bg-[#f1f2f3];
        }
      }
    }
  }

  &__body {
    @apply flex-1 flex-shrink-0 overflow-hidden;
  }
}
</style>
